<%--
  Created by IntelliJ IDEA.
  User: 28101
  Date: 2021/9/19
  Time: 22:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <title>topindex</title>
    <style>
        ul{
            list-style-type: none;
        }

        .texttop{
            float: left;
            margin-right: 50px;
        }

    </style>
</head>
<body>

    <div style="height: 500px">

        <div>
            <div title="page1" class="texttop">小米手机</div>
            <div title="page2" class="texttop">电视</div>
            <div title="page3" class="texttop">智能</div>
        </div>

        <div>
            <div id="page1" class="indexdiv" hidden="hidden"></div>
            <div id="page2" class="indexdiv" hidden="hidden"></div>
            <div id="page3" class="indexdiv" hidden="hidden"></div>
        </div>

    </div>


    <script>

        var beforepage;

        $("#page1").load("/CommodityServlet?method=getCommodityByPage&type=1&page=1&pageSize=5");
        $("#page2").load("/CommodityServlet?method=getCommodityByPage&type=2&page=1&pageSize=5");
        $("#page3").load("/CommodityServlet?method=getCommodityByPage&type=3&page=1&pageSize=5");

        $(".texttop").hover(function () {
            var pageid = "#" + $(this).attr("title");
            if (beforepage != null){
                $(beforepage).toggle();
            }
            $(pageid).toggle();
            beforepage = pageid;
        })

    </script>

</body>
</html>
